<template>
    <view class="page-index">
        <view class="bar-area">
            <view class="fc-white fs30" @click="loginOut" :style="showQuitBtn?'':'visibility: hidden;'">退出</view>
            <view class="flex-row" @click="areaChange">
                <view class="fc-white fs35">{{actionsSelect && actionsSelect.name}}</view>
                <u-icon class="ml10" name="arrow-down-fill" color="#fff" size="10"></u-icon>
            </view>
            <view class="fc-white fs30">{{loginUser && loginUser.YHXM}}</view>
        </view>
        <u-tabs class="width100 bg-white" :list="tabs" :scrollable="false" @change="change"></u-tabs>
        <scroll-view
                class="scroll-view"
                scroll-y="auto"
                :refresher-enabled="true"
                @refresherrefresh="onPullRefresh"
                @scrolltolower="onReachBottomDistance"
                :refresher-triggered="isRefresherTriggered"
        >
            <view>
                <view class="item-area" v-for="(item, index) in listData" :key="index">
                    <view class="item-title">
                        <view class="item-brch">{{item.brch}}</view>
                        <view :class="{
                        'item-yjfj':true,
                        'item-yjfj-one':item.yjfj == 1,
                        'item-yjfj-two':item.yjfj == 2,
                        'item-yjfj-three':item.yjfj == 3,
                        'item-yjfj-four':item.yjfj == 4,
                        }"
                        >
                            {{item.yjfjName}}
                        </view>
                    </view>
                    <view class="item-line"></view>
                    <view class="item-body">
                        <view class="item-body-top">
                            <view class="fs30 fb">{{item.brxm}}</view>
                            <u--image class="ml10" width="20" height="20"
                                      :src="item.brxbDm == 1?'/static/man.svg':'/static/female.svg'"></u--image>
                            <view class="fs30 fc-sub ml10">{{item.brnl}}</view>
                            <view class="fs30 fc-sub ml10">{{item.mzhm}}</view>
                        </view>
                        <u--text lines="2" size="15" :text="item.brzs"></u--text>
                    </view>
                    <view class="item-operate">
                        <u-button v-if="item.isowner == 0" color="#4b8efd" type="primary" shape="circle" size="normal"
                                  text="关注" @click="followClick(item)"></u-button>
                        <u-button v-if="item.isowner == 1" color="#999" type="primary" plain shape="circle"
                                  size="normal" text="取消关注" @click="unFlollowClick(item)"></u-button>
                    </view>
                </view>
                <u-empty :show="!(listData && listData.length >0)" marginTop="300"></u-empty>
            </view>
        </scroll-view>

<!--        <u-action-sheet :actions="actions" :show="actionShow" @select="select"-->
<!--                        @close="actionShow = false"></u-action-sheet>-->

        <u-popup :show="actionShow" mode="top" @close="actionShow = false" customStyle="margin-top:100rpx" overlayOpacity="0" duration="0">
                <view class="pop-item" v-for="(item, index) in actions"
                        :key="index" @click="select(item)">
                    <view class="pop-item-text">{{item.name}}</view>
                    <u-line></u-line>
                </view>
        </u-popup>

    </view>
</template>

<script>
    import {mapState} from 'vuex'
    import {logout} from "@/api/utils.js"

    export default {
        components: {},
        props: {
            showQuitBtn: {
                type: Boolean,
                default:function () {
                    return true
                }
            },
        },
        data() {
            return {
                actionShow: false,
                actionsSelect: null,//jzlx下拉选择
                tabsSelect: 0,//tab选择
                tabs: [
                    {name: "全部", code: 0},
                    {name: "我的关注", code: 1},
                ],
                isRefresherTriggered: false,
                listData: []
            }
        },
        watch: {
            actions(newval, oldVal) {
                if (newval && newval.length > 0) {
                    this.actionsSelect = newval[0];
                    this.refresh();
                }
            },
        },
        computed: {
            ...mapState(['loginUser', 'area']),
            actions() {
                if (this.area && this.area.length > 0) {
                    let list = this.area.map((item) => {
                        return {
                            name: item.ksmc,
                            code: item.ksdm
                        }
                    })
                    return list;
                } else {
                    return [];
                }
            }
        },
        mounted() {
            if (this.actions && this.actions.length > 0) {
                this.actionsSelect = this.actions[0];
                this.refresh();
            }
        },
        methods: {
            loginOut() {
                logout();
            },
            areaChange() {
                this.actionShow = true;
            },
            select(item) {
                this.actionShow = false;
                this.actionsSelect = item;
                this.refresh();
            },
            change(item) {
                this.tabsSelect = item.code;
                this.listData = [];
                this.refresh();
            },
            onPullRefresh() {
                if (this.isRefresherTriggered) {
                    return;
                }
                this.isRefresherTriggered = true;
                this.refresh();
            },
            onReachBottomDistance() {
            },
            async refresh() {
                let params = {
                    orgId: this.loginUser?.JGID,
                    jzlx: this.actionsSelect.code,
                    lspb: 0,
                    yhdm: this.loginUser?.YHDM,
                    type: this.tabsSelect == 0 ? 1 : 2
                }
                let result = await this.$commonAjax("auth/mobile/patient/get/getPatientList", params);
                this.isRefresherTriggered = false;
                if (result.res?.Data) {
                    this.listData = result.res.Data;
                }
            },
            // 关注
            async followClick(item) {
                let params = [{
                    jzlsh: item.jzlsh,
                    fzxh: item.fzxh,
                    gzhs: this.loginUser?.YHDM
                }]
                let result = await this.$commonAjax("auth/mobile/patient/post/SaveGroupByGzhs", params);
                if (result.res?.ReType == 0){
                    this.refresh();
                }
            },
            // 取消关注
            async unFlollowClick(item) {
                let params = [{
                    jlxh: item.wdgzJlxh,
                    gzhs: this.loginUser?.YHDM
                }]
                let result = await this.$commonAjax("auth/mobile/patient/post/deleteGroupByGzhs", params);
                if (result.res?.ReType == 0){
                    this.refresh();
                }
            }
        },
    }
</script>

<style lang="scss">
    .bar-area {
        height: 100rpx;
        background-color: $bs-color-primary;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 30rpx;
        justify-content: space-between;
        padding: 0 30rpx;
    }
    .scroll-view {
        width: 100%;
        height: calc(100% - 200rpx);
        background-color: #f3f5f7;
        padding-bottom: 20rpx;
    }
    .item-area{
        margin: 20rpx 20rpx 0 20rpx;
        background-color: #ffff;
        border-radius: 10rpx;
        padding: 10rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .item-title {
            width: 150rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .item-line {
            width: 1rpx;
            background-color: #d6d7d9;
        }
        .item-operate {
            width: 150rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            ::v-deep {
                .u-button {
                    height: 30px;
                }
            }
        }
        .item-body {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 20rpx;
            .item-body-top {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 10rpx;
            }
            .item-body-bottom {
                font-size: 25rpx;
                margin-top: 10rpx;

            }
        }
        .item-brch {
            font-size: 30rpx;
            color: #e06263;
            font-weight: bold;
        }
        .item-yjfj {
            font-size: 30rpx;
            margin-top: 5rpx;
            font-weight: bold;
            border-radius: 10rpx;
            width: 80rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item-yjfj-one {
            color: #e06263;
            background-color: #feecec;
        }
        .item-yjfj-two {
            color: #ff9f36;
            background-color: #fff5ea;
        }
        .item-yjfj-three {
            color: #fecb37;
            background-color: #fef9ea;
        }
        .item-yjfj-four {
            color: #fefefe;
            background-color: #37c24b;
        }
    }

    .pop-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .pop-item-text {
            padding: 20rpx 0;
        }
    }
</style>
